<template>
  <div class="carousel-container">
    <div class="carousel" ref="carousel">
      <div 
        class="carousel-track" 
        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
      >
        <div 
          v-for="(slide, index) in slides" 
          :key="index" 
          class="carousel-slide"
        >
          <img 
            :src="slide.image" 
            :alt="slide.alt" 
            class="carousel-image"
          />
        </div>
      </div>
      
      <!-- 左右切换按钮 -->
      <button 
        class="carousel-btn prev" 
        @click="prevSlide"
        aria-label="上一张"
      >
        &lt;
      </button>
      <button 
        class="carousel-btn next" 
        @click="nextSlide"
        aria-label="下一张"
      >
        &gt;
      </button>
      
      <!-- 轮播图指示器 -->
      <div class="carousel-indicators">
        <button
          v-for="(slide, index) in slides"
          :key="index"
          :class="{ active: index === currentIndex }"
          @click="goToSlide(index)"
          :aria-label="`跳转到第${index + 1}张`"
        ></button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Slide {
  image: string
  alt: string
}

const currentIndex = ref(0)
const interval = ref<number | null>(null)

const slides: Slide[] = [
  {
    image: 'https://picsum.photos/1920/1080?random=1',
    alt: '示例图片1'
  },
  {
    image: 'https://picsum.photos/1920/1080?random=2',
    alt: '示例图片2'
  },
  {
    image: 'https://picsum.photos/1920/1080?random=3',
    alt: '示例图片3'
  }
]

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.length
}

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + slides.length) % slides.length
}

const goToSlide = (index: number) => {
  currentIndex.value = index
}

const startAutoPlay = () => {
  interval.value = window.setInterval(() => {
    nextSlide()
  }, 5000)
}

const stopAutoPlay = () => {
  if (interval.value) {
    window.clearInterval(interval.value)
    interval.value = null
  }
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  stopAutoPlay()
})
</script>

<style scoped>
.carousel-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
  left: 20px;
}

.carousel-btn.next {
  right: 20px;
}

/* 轮播图指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-indicators button {
  width: 30px;
  height: 10px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-indicators button.active {
  background: white;
}

.carousel-indicators button:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-btn {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }
  
  .carousel-btn.prev {
    left: 10px;
  }
  
  .carousel-btn.next {
    right: 10px;
  }
  
  .carousel-indicators {
    bottom: 15px;
  }
  
  .carousel-indicators button {
    width: 20px;
    height: 8px;
  }
}
</style>